﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>校园二手书在线交易平台</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico in the root directory -->
        <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

		<!-- CSS here -->
        <link rel="stylesheet" href="assets/css/preloader.css">
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/slick.css">
        <link rel="stylesheet" href="assets/css/backToTop.css">
        <link rel="stylesheet" href="assets/css/meanmenu.css">
        <link rel="stylesheet" href="assets/css/nice-select.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
        <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
        <link rel="stylesheet" href="assets/css/ui-range-slider.css">
        <link rel="stylesheet" href="assets/css/default.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <style>
            .text-ellipsis {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
            }
            #search-button button:hover{
                background: #222222;
                color: #fff;
            }
            .my-font-weight{
                font-weight: 700;
            }
            .product__size ul li a{
                width: auto;
                padding: 0 5px;
                border-radius: 0;
                height: 30px;
                line-height: 30px;
            }
            #my-price-button{
                margin-left: 10px;
                font-size: 12px;
                font-weight: 700;
                background-color: #fcb700;
                padding: 3px 15px;
                color: #ffffff;
                border-radius: 15px;
                text-transform: initial;
                z-index: 1;
                text-transform: uppercase;
            }
            #my-price-button:hover{
                background-color: #222222;
            }
        </style>
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <!-- preloader area start -->
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div id="object"></div>
                </div>
            </div>
        </div>
        <!-- preloader area end -->

        <!-- back to top start -->
        <div class="progress-wrap">
            <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
            </svg>
        </div>
        <!-- back to top end -->

        <!-- header area start -->
        <header>
            <div class="header__area">
                <div clas   s="header__top header__padding d-none d-sm-block">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-xl-6 col-lg-6 col-md-5 d-none d-md-block">
                                <div class="header__welcome">
                                    <span>欢迎来到校园二手书籍交易平台</span>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-7">
                                <div class="header__action d-flex justify-content-center justify-content-md-end">
                                    <ul>
                                        <li class="d-none d-xl-inline-block">
                                            <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                            <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                        </li>
                                        <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                        <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header__info header__padding">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <!-- 左上角logo -->
                            <div class="col-xl-3 col-lg-3">
                                <div class="header__info-left d-flex justify-content-center justify-content-sm-between align-items-center">
                                    <div class="logo">
                                        <a href="index.html"><img src="assets/img/logo/logo-black.png" alt="logo"></a>
                                    </div>
                                </div>
                            </div>
                            <!-- 搜索的input框 -->
                            <div class="col-xl-9 col-lg-9">
                                <div class="header__info-right">
                                    <div class="header__search f-left d-none d-sm-block">
                                        <form action="javascript:;">
                                            <div id="search-button" class="header__search-box header__search-box-4">
                                                <input id="keyword" type="text" name="keyword" placeholder="请输入您需要的二手书籍">
                                                <button type="submit" th:onclick="searchKeyword()" style="font-weight: 700">搜 索</button>
                                            </div>
                                            <div id="my-category-parent-div" class="header__search-cat d-none d-lg-block">
                                                <select id="my-category-selected">
                                                    <option value="0">全部分类</option>
                                                    <option th:each="category:${result.categoryList}" th:value="${category.categoryId}" th:text="${category.catName}"></option>
                                                </select>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </header>
        <!-- header area end -->

        <!-- offcanvas area start -->
        <div class="offcanvas__area">
            <div class="offcanvas__wrapper">
            <div class="offcanvas__close">
                <button class="offcanvas__close-btn" id="offcanvas__close-btn">
                    <i class="fal fa-times"></i>
                </button>
            </div>
            <div class="offcanvas__content">
                <div class="offcanvas__logo mb-40">
                    <a href="index.html">
                    <img src="assets/img/logo/logo-black.png" alt="logo">
                    </a>
                </div>
                <div class="offcanvas__search mb-25">
                    <form action="#">
                        <input type="text" placeholder="What are you searching for?">
                        <button type="submit" ><i class="far fa-search"></i></button>
                    </form>
                </div>
                <div class="mobile-menu-2 fix"></div>
                <div class="offcanvas__action">

                </div>
            </div>
            </div>
        </div>
        <!-- offcanvas area end -->      
        <div class="body-overlay"></div>
        <!-- offcanvas area end -->

        <main>
            
            <!-- 左上角首页->搜索导航 start -->
            <section class="breadcrumb__area box-plr-75">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="breadcrumb__wrapper">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                      <li class="breadcrumb-item"><a href="http://huyulu666.top/index.html">首页</a></li>
                                      <li class="breadcrumb-item active" aria-current="page">搜索</li>
                                    </ol>
                                  </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 左上角首页->搜索导航 end -->

            <!-- 主体区域 start -->
            <section class="product__area box-plr-75 pb-70">
                <div class="container-fluid">
                    <div class="row">
                        <!-- 左边五个部分 -->
                        <div class="col-xxl-2 col-xl-3 col-lg-4">
                            <div class="product__widget">
                                <!-- 价格区间 -->
                                <div class="product__widget-item mb-15">
                                    <div class="accordion" id="productWidgetAccordion1">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingTwo">
                                                <button class="accordion-button product__widget-title" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                                    价格
                                                </button>
                                            </h2>
                                            <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#productWidgetAccordion1">
                                                <div class="accordion-body">
                                                    <div class="product__widget-content">
                                                        <div class="product__price-slider">
                                                            <div>
                                                                <form action="javascript:;">
                                                                    <input type="text" name="bookPrice" id="amount" readonly>
                                                                    <button id="my-price-button" th:onclick="searchPrice()" type="submit">查找</button>
                                                                </form>
                                                            </div>
                                                            <div id="slider-range"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 所在省份 -->
                                <div class="product__widget-item mb-15">
                                    <div class="accordion" id="productWidgetAccordion">
                                        <div class="accordion-item">
                                          <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button product__widget-title" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                发布者所在省份
                                            </button>
                                          </h2>
                                          <!-- 对应的属性 -->
                                          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                              <div class="product__widget-content">
                                                  <div class="product__size pt-10">
                                                      <ul>
                                                          <li th:each="province:${result.provinceList}">
<!--                                                              <a th:href="${'javascript:searchProducts(&quot;province&quot;,' + province + ')'}" th:text="${province}" ></a>-->
                                                              <a href="javascript:;" th:onclick="searchProducts('province', [[${province}]])" th:text="${province}" ></a>
                                                          </li>
                                                      </ul>
                                                  </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                </div>
                                <!-- 所在学校 -->
                                <div class="product__widget-item mb-15">
                                    <div class="accordion" id="productWidgetAccordion2">
                                        <div class="accordion-item">
                                          <h2 class="accordion-header" id="headingThree">
                                            <button class="accordion-button product__widget-title" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                                发布者所在学校
                                            </button>
                                          </h2>
                                          <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#productWidgetAccordion2">
                                            <div class="accordion-body">
                                              <div class="product__widget-content">
                                               <div class="product__size pt-10">
                                                   <ul>
                                                       <li th:each="university:${result.universityList}">
                                                           <a href="javascript:;" th:onclick="searchProducts('university', [[${university}]])" th:text="${university}"></a>
                                                       </li>
                                                   </ul>
                                               </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                </div>
                            </div>
                        </div>
                        <!-- 中间内容区域 -->
                        <div class="col-xxl-10 col-xl-9 col-lg-8 order-first order-lg-last">
                            <div class="product__grid-wrapper">
                                <div class="product__grid-item-wrapper pt-70">
                                    <!-- 最顶部数据 -->
                                    <div class="product__filter mb-50">
                                        <div class="row align-items-center">
                                            <!-- 最顶部左边 -->
                                            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
                                                <div class="product__filter-left d-sm-flex align-items-center">
                                                    <div class="product__col">
                                                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                                                            <li class="nav-item" role="presentation">
                                                              <button class="nav-link active" id="FiveCol-tab" data-bs-toggle="tab" data-bs-target="#FiveCol" type="button" role="tab" aria-controls="FiveCol" aria-selected="true">
                                                                <i class="fal fa-th"></i>
                                                              </button>
                                                            </li>
                                                          </ul>
                                                    </div>
                                                    <div class="product__result pl-60">
                                                        <p>每页展示 [[${result.pageSize}]] 条数据，共 [[${result.total}]] 条</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 最顶部右边 -->
                                            <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
                                                <div class="product__filter-right d-flex align-items-center justify-content-md-end">
                                                    <div id="my-size-parent-div" class="product__sorting product__show-no">
                                                        <select id="my-size-selected" th:onchange="searchPageSize()">
                                                            <option value="10">10</option>
                                                            <option value="15">15</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                        </select>
                                                    </div>
                                                    <div class="product__sorting product__show-position ml-20">
                                                        <select>
                                                            <option>综合</option>
                                                            <option>热度</option>
                                                            <option>价格</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 主体内容部分 -->
                                    <div class="tab-content" id="productGridTabContent">
                                        <div class="tab-pane fade show active" id="FiveCol" role="tabpanel" aria-labelledby="FiveCol-tab">
                                            <div class="row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 row-cols-md-4">
                                                <!-- 商品项 -->
                                                <div class="col" th:each="mybook:${result.books}">
                                                     <div class="product__item white-bg mb-30">
                                                         <div class="product__thumb p-relative">
                                                             <a th:href="'http://huyulu666.top/item.html?bookId=' + ${mybook.id}" class="w-img">
                                                                 <img th:src="${mybook.firstImageUrl}" alt="product">
                                                                 <img class="second-img" th:src="${mybook.secondImageUrl}" alt="product">
                                                             </a>
                                                             <div class="product__action p-absolute">
                                                                 <ul>
                                                                     <li><a href="javascript:;" title="添加到喜欢" th:onclick="addToLikes([[${mybook.id}]])"><i class="fal fa-heart"></i></a></li>
                                                                     <li th:onclick="changeBookItemInfo([[${mybook.id}]])">
                                                                         <a href="javascript:;" title="快速查看" data-bs-toggle="modal" data-bs-target="#productModalId"><i class="fal fa-search"></i></a>
                                                                     </li>
                                                                     <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                                                 </ul>
                                                             </div>
                                                         </div>
                                                         <div class="product__content text-center">
                                                             <!-- 名称 -->
                                                             <h6 class="product-name">
                                                                 <a class="product-item-link" href="product-details.html" th:utext="${mybook.bookName}"></a>
                                                             </h6>
                                                             <!-- 评价星级 -->
                                                             <div class="rating">
                                                                 <ul>
                                                                     <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                                     <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                                     <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                                     <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                                     <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                                 </ul>
                                                             </div>
                                                             <!-- 价格 -->
                                                             <span class="price" th:text="'￥'+${mybook.bookPrice}"></span>
                                                         </div>
                                                         <div class="product__add-btn">
                                                             <button type="button" class="my-font-weight">添加到购物车</button>
                                                         </div>
                                                     </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 页脚部分 -->
                                    <div class="row">
                                        <div class="col-xxl-12">
                                            <div class="basic-pagination pt-30 pb-30">
                                                <nav>
                                                   <ul>
                                                      <li>
                                                         <a href="javascript:;" th:onclick="searchProducts('pageNum', [[${result.pageNum}-1]])">
                                                            <i class="fal fa-chevron-double-left"></i>
                                                         </a>
                                                      </li>
                                                      <li th:each="i:${#numbers.sequence(1, result.totalPage)}">
                                                         <a href="javascript:;"
                                                            th:class="${result.pageNum == i ? 'active' : ''}"
                                                            th:onclick="searchPage([[${i}]])"
                                                         >[[${i}]]</a>
                                                      </li>
                                                      <li>
                                                         <a href="javascript:;" th:onclick="searchProducts('pageNum', [[${result.pageNum}+1]])">
                                                            <i class="fal fa-chevron-double-right"></i>
                                                         </a>
                                                      </li>
                                                   </ul>
                                                 </nav>
                                             </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- product area end -->

            <!-- brand area start -->
            <section class="brand__area">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                        <div class="brand__slider owl-carousel">
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-1.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-2.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-3.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-4.jpg" alt="">
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- brand area end -->

            <!-- 商品项的具体数据 start -->
            <div class="modal fade" id="productModalId" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered product__modal" role="document">
                    <div class="modal-content">
                        <!-- 商品项 -->
                        <div class="product__modal-wrapper p-relative">
                            <!-- 关闭按钮 -->
                            <div class="product__modal-close p-absolute">
                                <button data-bs-dismiss="modal"><i class="fal fa-times"></i></button>
                            </div>
                            <!-- 商品项主体 -->
                            <div class="product__modal-inner">
                                <div class="row">
                                    <!-- 左边图片部分 -->
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="product__modal-box">
                                            <div class="tab-content" id="modalTabContent">
                                            </div>
                                            <ul class="nav nav-tabs" id="modalTab" role="tablist">
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 右边文字部分 -->
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="product__modal-content">
                                            <!-- 商品标题 -->
                                            <h4 id="book_item_title"><a href="javascript:;"></a></h4>
                                            <!-- 商品描述 -->
                                            <div id="book_item_desc" class="product__modal-des mb-40">
                                                <p class="text-ellipsis"></p>
                                            </div>
                                            <!-- 书籍备注 -->
                                            <div id="book_item_remark" class="product__modal-des mb-40">
                                                <p></p>
                                            </div>
                                            <!-- 剩余商品数量 -->
                                            <div class="product__stock">
                                                <span>剩余数量：</span>
                                                <span id="book_item_count"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 书籍类型 -->
                                            <div class="product__stock">
                                                <span>书籍类型：</span>
                                                <span id="book_item_type"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 书籍新旧程度 -->
                                            <div class="product__stock mb-30">
                                                <span>新旧程度：</span>
                                                <span id="book_item_level"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 评价 -->
                                            <div class="product__review d-sm-flex">
                                                <div class="rating rating__shop mb-15 mr-35">
                                                    <ul>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <div class="product__add-review mb-15">
                                                    <span><a href="javascript:;">1 条评价</a></span>
                                                    <span><a href="javascript:;">添加评价</a></span>
                                                </div>
                                            </div>
                                            <!-- 价格 -->
                                            <div class="product__price">
                                                <span id="book_item_price" style="color: red; font-weight: 700"></span>
                                                <span id="book_item_original_price"><del style="color: #999999; font-size: small"></del></span>
                                            </div>
                                            <!-- 选择数量和添加购物车按钮 -->
                                            <div class="product__modal-form mb-30">
                                                <form action="#">
                                                    <div class="pro-quan-area d-lg-flex align-items-center">
                                                        <div class="product-quantity mr-20 mb-25">
                                                            <div class="cart-plus-minus p-relative"><input type="text"
                                                                                                           value="1"/></div>
                                                        </div>
                                                        <div class="pro-cart-btn mb-25">
                                                            <button class="t-y-btn" type="submit">添加到购物车</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <!-- 商品项菜单：喜欢、比较、打印、分享 -->
                                            <div class="product__modal-links">
                                                <ul>
                                                    <li><a id="likeBook" href="javascript:;" title="添加到喜欢"><i class="fal fa-heart"></i></a>
                                                    </li>
                                                    <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                                    <li><a href="javascript:;" title="分享"><i class="fal fa-share-alt"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品项的具体数据 end -->

        </main>

        <!-- footer area start -->
        <!-- footer area end -->

		<!-- JS here -->
        <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="assets/js/vendor/waypoints.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <script src="assets/js/slick.min.js"></script>
        <script src="assets/js/backToTop.js"></script>
        <script src="assets/js/jquery.fancybox.min.js"></script>
        <script src="assets/js/countdown.js"></script>
        <script src="assets/js/nice-select.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/magnific-popup.min.js"></script>
        <script src="assets/js/jquery-ui-slider-range.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/main.js"></script>
        <script type="text/javascript" th:inline="javascript">
            // 页面加载时启动
            $(function () {
                // 价格选项修改
                let minPrice = [[${result.minPrice}]];
                console.log(minPrice)
                let maxPrice = [[${result.maxPrice}]];
                console.log(maxPrice)
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [minPrice, maxPrice],
                    slide: function (event, ui) {
                        $("#amount").val("￥" + ui.values[0] + " - ￥" + ui.values[1]);
                    }
                });
                $("#amount").val("￥" + $("#slider-range").slider("values", 0) +
                    " - ￥" + $("#slider-range").slider("values", 1));

                //设置页面大小的默认选中项
                let pageSize = [[${result.pageSize}]];
                $("#my-size-parent-div li").each(function(){
                    $(this).removeClass('selected');
                    if ($(this).text() == pageSize){
                        $(this).addClass('selected');
                    }
                });
                $("#my-size-parent-div span").text(pageSize);

                //设置分类选中项
                let category = [[${result.selectCategoryName}]];
                $("#my-category-parent-div li").each(function(){
                    $(this).removeClass('selected');
                    if ($(this).text() == category){
                        $(this).addClass('selected');
                    }
                });
                $("#my-category-parent-div span").text(category);
                if ($("#my-category-parent-div span").text() == ""){
                    $("#my-category-parent-div span").text("全部分类");
                }

            })
            // 价格按钮
            function searchPrice() {
                let priceValue = document.getElementById("amount").value;
                console.log(priceValue)
                searchProducts("bookPrice", priceValue);
            }
            // 页码按钮
            function searchPage(newPageNum) {
                console.log(newPageNum + " - " + [[${result.pageNum}]])
                if ([[${result.pageNum}]] != newPageNum) {
                    searchProducts("pageNum", newPageNum);
                }
            }
            // 搜索按钮
            function searchKeyword() {
                let href = location.href;
                let index = href.indexOf("?");
                if (index != -1){
                    href = href.substr(0, index);
                }
                console.log(href);
                href = href + "?pageNum=1";
                let keyword = $("#keyword").val();
                if (keyword != undefined && keyword != null){
                    href = href + "&keyword=" + keyword;
                }
                console.log(href);
                let category = $("#my-category-selected option:selected").val();
                if (category != 0){
                    href = href + "&categoryId=" + category;
                }
                location.href = href;
            }
            // 页面大小按钮
            function searchPageSize() {
                let pageSize = $("#my-size-selected option:selected").val();
                console.log(pageSize);
                searchProducts("pageSize", pageSize);
            }
            // 其他按钮
            function searchProducts(name, value) {
                if (name == "pageNum"){
                    if (value <= 0 || value > [[${result.totalPage}]]) return;
                }
                if (location.href.indexOf("?") != -1){
                    //如果有其他查询参数
                    if (location.href.indexOf(name) == -1){
                        // 如果当前的查询参数不存在，则直接拼接
                        location.href = location.href + "&" + name + "=" + value;
                    } else {
                        // 如果当前查询参数存在，则替换
                        let s1 = location.href.split("?");
                        let newHref = s1[0] + "?";
                        let attrs = s1[1].split("&");
                        for(let i = 0; i < attrs.length; i ++){
                            if (attrs[i].indexOf(name) != -1){
                                let attr = attrs[i].split("=");
                                newHref = newHref + attr[0] + "=" + value + "&";
                            } else {
                                newHref = newHref + attrs[i] + "&";
                            }
                        }
                        location.href = newHref.substr(0, newHref.length-1);
                    }
                } else {
                    // 如果不存在任何查询参数，则拼接新的查询参数
                    location.href = location.href + "?" + name + "=" + value;
                }
            }
            //动态获取书籍详细信息后回填
            function changeBookItemInfo(id){
                $.ajax({
                    type: "get",
                    // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
                    url: "http://huyulu666.top/item/" + id + ".html",
                    dataType: "json",

                    success: function(response) {
                        console.log(response);
                        $("#book_item_title a").text(response.bookName);    // 名称
                        $("#book_item_desc p").text(response.bookDesc);     // 描述
                        $("#book_item_remark p").text(response.remark);     // 备注
                        $("#book_item_count").text(response.bookCount + " 件");  // 库存
                        $("#book_item_type").text(response.bookTypeName);   // 类型
                        if(response.bookLevel == 0)  $("#book_item_level").text("全新");  // 新旧程度
                        else $("#book_item_level").text(response.bookLevel + " 成新");
                        $("#book_item_price").text("￥" + response.bookPrice);  // 价格
                        $("#book_item_original_price del").text("￥" + response.bookOriginalPrice);  // 价格
                        // 设置书籍图片
                        $("#modalTabContent").empty();
                        $("#modalTab").empty();
                        for(let i = 0; i < response.imagesArray.length; i ++){
                            if (i == 0){
                                $("#modalTabContent").append(`<div class="tab-pane fade show active" id="nav1" role="tabpanel" aria-labelledby="nav1-tab">
                            <div class="product__modal-img w-img book_item_image">
                                <img src="${response.imagesArray[0]}" alt="" width="100%" height="auto">
                            </div>
                        </div>`);
                                $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav1" type="button" role="tab" aria-controls="nav1"
                                aria-selected="true">
                            <img src="${response.imagesArray[0]}" alt="" width="85px">
                            </button>
                        </li>`);

                            } else {
                                $("#modalTabContent").append(`
                            <div class="tab-pane fade" id="nav${i+1}" role="tabpanel" aria-labelledby="nav${i+1}-tab">
                                <div class="product__modal-img w-img book_item_image">
                                    <img src="${response.imagesArray[i]}" alt="" width="100%" height="auto">
                                </div>
                            </div>
                        `);
                                $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav${i+1}" type="button" role="tab" aria-controls="nav${i+1}"
                                aria-selected="true">
                            <img src="${response.imagesArray[i]}" alt="" width="85px">
                            </button>
                        </li>`);
                            }

                        }

                        $("#likeBook").off("click")
                        $("#likeBook").click(function () {
                            addToLikes(response.id);
                        })
                    },
                    error: function(data) {
                        console.log(data)
                    }
                });
            }

            //添加到喜欢
            function addToLikes(bookId) {
                $.ajax({
                    type: "post",
                    data : {'bookId':bookId},
                    url: "http://huyulu666.top/addToLikes",
                    dataType: "json",

                    success: function (response) {
                        console.log(response)
                        if (response == true){
                            alert("添加成功")
                        } else {
                            alert("添加失败")
                        }
                    },
                    error: function (data) {
                    }
                });
            }
        </script>
    </body>
</html>
